﻿@page "/MultiSelect-Dropdown/Grouping"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the grouping supports of the MultiSelect. Type a character in the MultiSelect element or click on this element to choose one or more items from the categorized list.</p>
</SampleDescription>
<ActionDescription>
   <p>The MultiSelect allows to group the relevant items under a corresponding category by mapping the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_GroupBy' target='_blank'> GroupBy</a> field, and allows to load the list items.</p>
   <p>The grouping sample illustrates how the vegetables are grouped based on its category.</p>
   <p>More information on the grouping feature configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/multiselect-dropdown/grouping/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfMultiSelect TValue="string[]" TItem="Vegetables" Placeholder="Select a vegetable" DataSource="@VegetablesList">
            <MultiSelectFieldSettings GroupBy="Category" Value="Vegetable"></MultiSelectFieldSettings>
        </SfMultiSelect>
    </div>
</div>

@code{

    public class Vegetables
    {
        public string Vegetable { get; set; }
        public string Category { get; set; }
        public string ID { get; set; }
    }

    List<Vegetables> VegetablesList = new List<Vegetables>()
{
        new Vegetables() { Vegetable = "Cabbage", Category = "Leafy and Salad", ID = "item1" },
        new Vegetables() { Vegetable = "Chickpea", Category = "Beans", ID = "item2" },
        new Vegetables() { Vegetable = "Garlic", Category = "Bulb and Stem", ID = "item3" },
        new Vegetables() { Vegetable = "Green bean", Category = "Beans", ID = "item4" },
        new Vegetables() { Vegetable = "Horse gram", Category = "Beans", ID = "item5" },
        new Vegetables() { Vegetable = "Nopal", Category = "Bulb and Stem", ID = "item6" },
        new Vegetables() { Vegetable = "Onion", Category = "Bulb and Stem", ID = "item7" },
        new Vegetables() { Vegetable = "Pumpkins", Category = "Leafy and Salad", ID = "item8" },
        new Vegetables() { Vegetable = "Spinach", Category = "Leafy and Salad", ID = "item9" },
        new Vegetables() { Vegetable = "Wheat grass", Category = "Leafy and Salad", ID = "item10" },
        new Vegetables() { Vegetable = "Yarrow", Category = "Leafy and Salad", ID = "item11" },
    };
}

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }
</style>